<template>
<div class="parentWrapper">

    <parent v-if="parentData.parent" :parentData="parentData.parent" />

    <div class="info">
        <div class="name">{{parentData.account.nickname}}</div>
        <div class="date">{{date}}</div>
    </div>

    <div class="info-box">
        <img
          class="photos"
          v-if="parentData.pics.length != 0"
          :src="$axios.defaults.baseURL + parentData.pics[0].url"
          alt=""
        />
            <div class="btnReply" @click="handleClick(parentData.account.nickname)">
            回复
            </div>
    </div>

    <div class="mainContent">
      {{ parentData.content }}
    </div>


</div>
</template>

<script>
import {eventBus} from '@/utils/eventBus'
import moment from "moment"

export default {
    name: "parent",
    props: ['parentData'],
    methods: {
        handleClick(nickname) {
            console.log(nickname);
            eventBus.$emit('sendReply',nickname)

            
        }
    },

    mounted(){
        console.log(this.parentData);
    },

    computed: {
        date() {
            return moment(this.parentData.updated_at).format  ('YYYY-MM-DD hh:mm')
        }
    },

}
</script>


<style lang="less" scoped>
.parentWrapper {
    position: relative;
    padding: 10px;
    margin: 10px;
    background-color: #f9f9f9;
    font-size: 14px;
    color: #888;
    border: 1px solid #dddddd;

        .info {
            display: flex;
        
            .date {
                flex: 1;
                padding-left: 20px;
                font-size: 12px;
                color: #999999;
            }
        }

        .info-box {
            display: flex;
            .photos {
                width: 80px;
                height: 80px;
                border: 1px dashed #ccc;
                border-radius: 20px;

            }

            .btnReply {
                position: absolute;
                right: 22px;
                bottom: 9px;
            }
            .btnReply:hover {
            color: #1e50a2;
            text-decoration: underline;
            }
        }

        .mainContent {
            padding-top: 10/360*100vw;
        }

}

</style>